<!DOCTYPE html>
<html>
<head>
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script>
        //创建一个选项卡的方法
        function createTab(index, obj) {
            /*<li class="nav-item" data-index="xx">
             <a data-tid="xx" class="nav-link" id="pills-xx-tab" data-toggle="pill" href="#pills-xx">oo</a>
             </li>*/
            var a = $("<a class='nav-link' data-toggle='pill'></a>").attr("data-tid", obj.id)
                .attr("id", "pills-" + obj.id + "-tab").attr("href", "#pills-" + obj.id).html(obj.name);
            return $("<li class='nav-item'></li>").attr("data-index", index).append(a);
        }

        $(function () {
            //渲染城市选项卡
            $.get("/regions/city", function (data) {
                $.each(data, function (index, item) {
                    var tab = createTab(index, item);
                    tab.appendTo("#pills-tab");
                    //获取选项卡内容
                    $.get("regions/"+item.id+"/hotels",function (data) {
                        $(data).appendTo("#pills-tabContent");
                        /*setTimeout(function (args) {
                            $("#pills-tabContent div:first").addClass("active show");
                        },500)*/
                    },"html");

                });

            });
            /*$("#pills-tabContent > div:first")*/


            $("#pills-tab").on("click", "a[data-tid]", function () {
                //this
            })


        });

    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="找酒店">
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
</ul>

<div class="tab-content " id="pills-tabContent">
</div>
</body>
</html>